<template>
  <el-card>
    <div id="hubeiMap" style="height:31em; text-align:center"></div>
  </el-card>
</template>

<script>
  import hubeiJson from '../../../static/json/hubei'
  export default {
    data() {
      return {
        mapData: [
          {name: '武汉市', value: 5},
          {name: '黄石市', value: 2},
          {name: '孝感市', value: 6},
          {name: '宜昌市', value: 12},
          {name: '十堰市', value: 1},
          {name: '襄阳市', value: 7},
          {name: '恩施市', value: 4},
          {name: '鄂州市', value: 8},
          {name: '潜江市', value: 9},
          {name: '仙桃市', value: 11},
          {name: '随州市', value: 12},
          {name: '咸宁市', value: 13},
          {name: '荆门市', value: 19},
          {name: '荆州市', value: 3},
          {name: '黄冈市', value: 5},
          {name: '天门市', value: 7},
          {name: '神农架林区', value: 7},
        ]
      }
    },
    methods: {
        createMap() {
          const myChart = this.$echarts.init(document.getElementById('hubeiMap'));
          this.$echarts.registerMap('hubei', hubeiJson);
          myChart.setOption(this.calOption());
        },
        // 设置地图的属性
        calOption() {
          let series = [];
          series.push(this.buildEffectScatterSeries());
          series.push(this.buildLinesSeries());
          return {
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                return params.name + ' : ' + params.value[2];
              }
            },
            backgroundColor: '',        // 图表背景色
            geo: {
              map: 'hubei',
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              zoom: this.zoom,
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: '#00B2EE',
                  borderColor: '#000000',
                  borderWidth: 0.5,
                  borderType: 'solid',
                  shadowBlur: 5,
                  shadowColor: 'rgb(193,236,255,0.5)',
                  shadowOffsetX: 3,
                  shadowOffsetY: 1,
                  opacity: 1,
                },
                emphasis: {
                  areaColor: '#00296e'
                }
              },
              layoutCenter: ['50%', '50%'],
              // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
              layoutSize: '100%'
            },
            series: series
          }
        },
        convertData(data) {
          let resultData = hubeiJson.features.map(item => {
            let cp = item.properties.cp;
            let value;
            for (let j in data) {
              if (data[j].name === item.properties.name) {
                value = data[j].value;
                cp.push(value);
                break;
              }
            }
            return {
              name: item.properties.name,
              value: cp
            }
          });
          return resultData;
        },
        convertLinesData(data) {
          let cp = [];
          for (let i = 0; i < hubeiJson.features.length; i++) {
            if (hubeiJson.features[i].properties.name === "武汉市") {
              cp = hubeiJson.features[i].properties.cp;
              break;
            }
          }
          let toArea = {
            name: "武汉市",
            cp: cp
          };
          let linesData = [];
          for (let index in data) {
            if (data[index].name === toArea.name) {
              continue;
            }
            let coords = [];
            for (let j = 0; j < hubeiJson.features.length; j++) {
              if (hubeiJson.features[j].properties.name === data[index].name) {
                coords.push(hubeiJson.features[j].properties.cp);
                break;
              }
            }
            coords.push(toArea.cp);
            let lineData = {
              fromName: data[index].name,
              toName: toArea.name,
              coords: coords
            };
            linesData.push(lineData);
          }
          return linesData;
        },
        buildEffectScatterSeries() {
          return {
            name: '监测点个数',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.mapData),
            symbol: 'circle',
            symbolSize: 14,
            rippleEffect: {
              period: 4,
              scale: 3,
              brushType: 'fill',
            },
            label: {
              normal: {
                show: true,
                trigger: 'item',
                position: 'inside',
                color: '#ffffff',
                fontFamily: 'Microsoft YaHei',
                fontSize: 15,
                formatter: function (params) {
                  return params.value[2];
                }
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                // color: params => {
                //     if (params.name === '武汉市') {
                //         return '#ffdd00';
                //     } else {
                //         return '#00aeff';
                //     }
                // }
                color: {
                  type: 'radial',
                  x: 0,
                  y: 0,
                  r: 6,
                  colorStops: [{
                    offset: 0, color: '#52feff' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#ffffff' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              emphasis: {
                borderColor: '#ff8300',
                borderWidth: 1
              }
            }
          }
        },
        buildLinesSeries() {
          let planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
          return {
            name: "数据传输",
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 1,
            symbol: ['none', 'none'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.5,
              symbol: 'circle',
              symbolSize: 12,
              color: 'rgb(255,255,255,1)',
              // constantSpeed:30
            },
            lineStyle: {
              normal: {
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 1,
                //     [
                //         {offset: 0.2, color: '#f0b000'},
                //         {offset: 0.5, color: '#f0cc82'},
                //         {offset: 1, color: '#fff6f1'}
                //     ]),
                color: '#00eeff',
                width: 0.5,
                opacity: 1,
                curveness: 0.5
              }
            },
            data: this.convertLinesData(this.mapData)
          }
        },
        wrapStyle() {
          if (this.isFullScreen) {
            this.style = "height:38em; text-align:center";
            this.zoom = 1.5;
          } else {
            this.style = "height:31em; text-align:center";
            this.zoom = 1.2
          }
        }

    },
    mounted() {
      this.createMap();
    }
  }
</script>

<style>

</style>
